<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
<th:block th:include="include :: header('新增问卷题目')" />
</head>
<body>
	<div class="wrapper wrapper-content animated fadeInRight ibox-content">
		<form class="form-horizontal m">
			<input name="answerIndex" th:value="${answerIndex}" type="hidden">
			<div class="row">
				<div class="col-sm-6">
					<div class="form-group">
						<label class="col-sm-4 control-label is-required">样式类型：</label>
						<div class="col-sm-8">
							<select class="form-control" id="showStyle">
								<option value="01">默认</option>
								<option value="02">边框</option>
								<option value="03">拼接</option>
							</select>
						</div>
					</div>
				</div>
				<div class="col-sm-6">
					<div class="form-group">
						<label class="col-sm-4 control-label is-required">展示类型：</label>
						<div class="col-sm-8">
							<select class="form-control" id="showType">
								<option value="01">每行一项</option>
								<option value="02">每行二项</option>
								<option value="03">每行三项</option>
								<option value="04">每行四项</option>
							</select>
						</div>
					</div>
				</div>
			</div>
			<div class="row">
				<div class="col-sm-6">
					<div class="form-group">
						<label class="col-sm-4 control-label is-required">题目显示：</label>
						<div class="col-sm-8">
							<select class="form-control" id="isShowTitle">
								<option value="0">显示题目</option>
								<option value="1">显示选项</option>
							</select>
						</div>
					</div>
				</div>
				<div class="col-sm-6"></div>
			</div>
			<div class="row" id="d_group_div">
				<div class="col-sm-12">
					<div class="form-group">
						<label class="col-sm-2 control-label is-required">分组题干：</label>
						<div class="col-sm-10">
							<input class="form-control" type="text" id="titleGroup">
						</div>
					</div>
				</div>
			</div>
			<div class="row">
			<div class="col-sm-12">
				<button type="button" class="btn btn-white btn-sm"
					onclick="addColumn()">
					<i class="fa fa-plus"> 增加</i>
				</button>
				<button type="button" class="btn btn-white btn-sm"
					onclick="sub.delColumn()">
					<i class="fa fa-minus"> 删除</i>
				</button>
				<button type="button" class="btn btn-white btn-sm"
					onclick="tbChange()">
					<i class="fa fa-check"> 确认</i>
				</button>
				<div class="col-sm-12 select-table table-striped">
					<table id="bootstrap-table"></table>
				</div>
			</div>
		</div>
		</form>

	</div>
	<th:block th:include="include :: footer" />
	<script th:src="@{/js/jquery.tmpl.js}"></script>
	<script th:inline="javascript">
		var prefix = ctx + "qa/questions"
		
		$(document).ready(function(){
			
			$("#showStyle").val(parent.$("input[name='questionnaireQuestionsList["+[[${answerIndex}]]+"].showStyle']").val());
			$("#showType").val(parent.$("input[name='questionnaireQuestionsList["+[[${answerIndex}]]+"].showType']").val());
			$("#isShowTitle").val(parent.$("input[name='questionnaireQuestionsList["+[[${answerIndex}]]+"].isShowTitle']").val());
			$("#titleGroup").val(parent.$("input[name='questionnaireQuestionsList["+[[${answerIndex}]]+"].titleGroup']").val());
			
			
			$("#d_group_div").css("display", "none");
			var qt = parent.$("select[name='questionnaireQuestionsList["+[[${answerIndex}]]+"].questionsType']").val();
			if (qt == '02' || qt == '04') {
				$("#d_group_div").css("display", "block");
			}

			//实例化表格
			var data = parent.$("input[name='questionnaireQuestionsList["+[[${answerIndex}]]+"].answer']").val();
			if ($.trim(data) == '') {
				data = [];
			} else {
				data = JSON.parse(data);
			}
						
		
			var options = {
					pagination : false,
					showSearch : false,
					showRefresh : false,
					showToggle : false,
					showColumns : false,
					sidePagination : "client",
					data:data,
					columns : [
							{
								checkbox : true
							},
							 {
			                    field: 'index',
			                    align: 'center',
			                    title: "序号",
			                    visible: false,
			                    formatter: function (value, row, index) {
			                    	var columnIndex = $.common.sprintf("<input type='hidden' name='index' value='%s'>", $.table.serialNumber(index));
			                    	return columnIndex + $.table.serialNumber(index);
			                    }
			                },
							{
								field : 'answerIndex',
								align : 'center',
								title : "题号",
			                    formatter: function(value, row, index) {
					                return $.table.serialNumber(index);
			                    }
							},
							{
								field : 'answerText',
								align : 'center',
								title : '答案内容',
								formatter : function(value, row, index) {
									var html = $.common
											.sprintf(
													"<input class='form-control' type='text' name='questionnaireAnswersList[%s].answerText' value='%s'>",
													index, value);
									return html;
								}
							},
							{
								field : 'inputType',
								align : 'center',
								title : '输入类型',
			                    formatter: function(value, row, index) {
			                        var data = [{ index: index, type: value }];
					                return $("#inputTypeTpl").tmpl(data).html();
			                    }
							},
							{
								field : 'inputText',
								align : 'center',
								visible: false,
								title : '输入内容'
							},
							{
								field : 'isDefault',
								align : 'center',
								title : '是否默认',
								formatter : function(value, row, index) {
									var data = [{ index: index, type: value }];
					                return $("#isDefaultTpl").tmpl(data).html();
								}
							},
							{
								field : 'remark',
								align : 'center',
								title : '备注',
								formatter : function(value, row, index) {
									var html = $.common.sprintf("<input class='form-control' type='text' name='questionnaireAnswersList[%s].remark' value='%s'>",index, value);
									return html;
								}
							},
							{
								field : 'score',
								align : 'center',
								title : '分值',
								formatter : function(value, row, index) {
									var html = $.common.sprintf("<input class='form-control' type='number' name='questionnaireAnswersList[%s].score' value='%s'>",index, value);
									return html;
								}
							},
							{
								field : 'scoreType',
								align : 'center',
								title : '得分方式',
								formatter : function(value, row, index) {
									var data = [{ index: index, type: value }];
					                return $("#scoreTypeTpl").tmpl(data).html();
								}

							},
							{
								field : 'rightKey',
								align : 'center',
								title : '正确答案',
								formatter : function(value, row, index) {
									var html = $.common.sprintf("<input class='form-control' type='text' name='questionnaireAnswersList[%s].rightKey' value='%s'>",index, value);
									return html;
								}
							}]
				};
				$.table.init(options);
				
				
		});
		
		
		$("#form-questions-add").validate({
			focusCleanup : true
		});


		function addColumn() {
			var count = $("#" + table.options.id).bootstrapTable('getData').length;
			sub.editColumn();
			$("#" + table.options.id).bootstrapTable('insertRow', {
				index : count,
				row : {
					index: $.table.serialNumber(count),
					answerIndex : "",
					answerText : "答案",
					inputType : "",
					inputText : "",
					isDefault : "",
					remark : "",
					rightKey : "",
					score : "",
					scoreType : ""
				}
			});
			
		}
		
		var scoreCount = 0;
		
		function tbChange(){			
			var answer = $("#" + table.options.id).bootstrapTable('getData');
			$.each(answer,function(index,item){
				if(item.score>scoreCount){
					scoreCount = item.score;
				}
			});
			
			var answerStr = JSON.stringify(answer);
			alert(answerStr);
			parent.$("input[name='questionnaireQuestionsList["+[[${answerIndex}]]+"].totalScore']").val(scoreCount);
			parent.$("input[name='questionnaireQuestionsList["+[[${answerIndex}]]+"].answer']").val(answerStr);
		}
	</script>
</body>
</html>


<!-- 输入类型 -->
<script id="inputTypeTpl" type="text/x-jquery-tmpl">
<div>
<select class='form-control' name='questionnaireAnswersList[${index}].inputType'>
    <option value="01" {{if type==="01"}}selected{{/if}}>无</option>
	<option value="02" {{if type==="02"}}selected{{/if}}>文本</option>
	<option value="03" {{if type==="03"}}selected{{/if}}>时间</option>
</select>
</div>
</script>

<!-- 是否默认 -->
<script id="isDefaultTpl" type="text/x-jquery-tmpl">
<div>
<select class='form-control' name='questionnaireAnswersList[${index}].isDefault'>
    <option value="01" {{if type==="01"}}selected{{/if}}>无</option>
	<option value="02" {{if type==="02"}}selected{{/if}}>文本</option>
	<option value="03" {{if type==="03"}}selected{{/if}}>时间</option>
</select>
</div>
</script>

<!-- 是否默认 -->
<script id="scoreTypeTpl" type="text/x-jquery-tmpl">
<div>
<select class='form-control' name='questionnaireAnswersList[${index}].scoreType'>
    <option value="01" {{if type==="01"}}selected{{/if}}>=</option>
	<option value="02" {{if type==="02"}}selected{{/if}}>包含</option>
</select>
</div>
</script>